<template>
  <div class="cesium" id="cesiumContainer"></div>
</template>

<script>
//引入Cesium样式
import 'cesium/Build/Cesium/Widgets/widgets.css' //样式
import * as Cesium from 'cesium'

const {Viewer, UrlTemplateImageryProvider} = Cesium
import flightData from "@/assets/json/plane.json";

let cesiumMap = null
let airplaneEntity = null
export default {
  name: "cesium",
  props: {
    lists: {
      type: Array,
      default: () => {
        return []
      }
    },
    list: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      isA: false
    }
  },
  watch: {
    list(val) {
      // console.log(999, val)
      if (!cesiumMap) {
        return false
      }
      // this.drawLine(val)
    }
  },
  mounted() {
    /* 默认亚洲经纬度 */
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
      90,
      -20,
      110,
      90
    );
    cesiumMap = new Viewer("cesiumContainer", {
      // imageryProvider: new UrlTemplateImageryProvider({
      //   // 下面是我的瓦片地址部署在本地，可以根据自己实际修改
      //   url: 'http://192.168.110.205:8888' + '/satellite/{z}/{x}/{y}.jpg',
      //   fileExtension: "jpg"
      // }),
      shouldAnimate: false, // 自动播放
      animation: false, // 是否显示动画控件
      homeButton: false, // 是否显示home键
      geocoder: false, // 是否显示地名查找控件
      baseLayerPicker: false, // 是否显示图层选择控件
      timeline: false, // 是否显示时间线控件
      fullscreenButton: false, // 是否全屏显示
      scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      infoBox: false, // 是否显示点击要素之后显示的信息
      sceneModePicker: false, // 是否显示投影方式控件  三维/二维
      navigationInstructionsInitiallyVisible: false,
      navigationHelpButton: false, // 是否显示帮助信息控件
      selectionIndicator: false, // 是否显示指示器组件
      // 注释时相当于使用默认地形，解开注释相当于使用全球地形
      terrainProvider: Cesium.createWorldTerrain()
    });

    // viewer.imageryLayers.addImageryProvider(new UrlTemplateImageryProvider({
    //   url: 'http://localhost:8080' + '/tms/overlay/{z}/{x}/{y}.png',
    //   fileExtension: "png"
    // }));

    // 判断是否支持图像渲染像素化处理
    if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
      cesiumMap.resolutionScale = window.devicePixelRatio;
    }
    // 开启抗锯齿
    cesiumMap.scene.fxaa = true;
    cesiumMap.scene.postProcessStages.fxaa.enabled = true;

    this.aa()
  },
  methods: {
    // 画线
    drawLine(item) {
      // cesiumMap.entities.removeAll();

      // return false
      if (this.isA) {
        // return false
      }
      let positionProperty = new Cesium.SampledPositionProperty();
      let time = new Date(item.date);

      let totalSeconds = 1;

      let start = Cesium.JulianDate.fromDate(time);
      // 设置终点时间
      let stop = Cesium.JulianDate.addSeconds(
        start,
        totalSeconds,
        new Cesium.JulianDate()
      );

      cesiumMap.clock.startTime = start.clone();
      cesiumMap.clock.stopTime = stop.clone();
      cesiumMap.clock.currentTime = start.clone();

      let dataPoint = item;

      // 计算当前的3D坐标
      let position = Cesium.Cartesian3.fromDegrees(
        dataPoint.longitude,
        dataPoint.latitude,
        dataPoint.height
      );
      // 添加轨迹采样点
      positionProperty.addSample(stop, position);
      console.log(airplaneEntity)
      if(!airplaneEntity){
        // 添加物体点
        airplaneEntity = cesiumMap.entities.add({
          model: {
            uri: '/static/Cesium_Air.glb',
            minimumPixelSize: 128,
            maximumScale: 20000,
          },
          position: position,
          point: {
            pixelSize: 10,
            color: new Cesium.Color(0.7, 0.8, 0, 0.7),
          },
          orientation: new Cesium.VelocityOrientationProperty(positionProperty),
        });
      }else{
        this.updatePosition(position)
      }


      console.log(9999222)

      return false
      this.isA = true

      // 创建飞机模型
      let airplaneEntity = cesiumMap.entities.add({
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: start,
            stop: stop,
          }),
        ]),
        model: {
          uri: '/static/Cesium_Air.glb',
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
        position: positionProperty,
        // 自动计算前进方向
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),
        // 绘制轨迹线
        path: new Cesium.PathGraphics({
          width: 1,
        }),
        point: {
          pixelSize: 10,
          color: new Cesium.Color(0.5, 0.5, 0.5, 0.7),
        },
      });

      // 设置时间速率
      // cesiumMap.clock.multiplier = 10;

      // 设置自动播放
      // cesiumMap.clock.shouldAnimate = true;
    },
    updatePosition(position){
      console.log(11,position)
    },

    aa() {
      // 设置样本属性，将轨迹点添加至样本属性
      // JulianDate儒略日，天文学家专门用于计算时间的一种数学表示方法
      // 起点时间是在公元前4713年1月1日，终点时间是在公元前4713年1月1日，时间间隔是1秒
      const positionProperty = new Cesium.SampledPositionProperty();
      // 时间的间隔
      const timeStepInSeconds = 30;
      const totalSeconds = (flightData.length - 1) * timeStepInSeconds;
      // 设置起点时间
      const time = new Date("2020-03-09T23:10:00Z");
      // console.log(time);
      const start = Cesium.JulianDate.fromDate(time);
      // 设置终点时间
      const stop = Cesium.JulianDate.addSeconds(
        start,
        totalSeconds,
        new Cesium.JulianDate()
      );

      cesiumMap.clock.startTime = start.clone();
      cesiumMap.clock.stopTime = stop.clone();
      cesiumMap.clock.currentTime = start.clone();
      // 设置进度条，从哪里开始到哪里结束
      // cesiumMap.timeline.zoomTo(start, stop);

      for (let i = 0; i < flightData.length; i++) {
        const dataPoint = flightData[i];
        // 采样时间
        const time = Cesium.JulianDate.addSeconds(
          start,
          i * timeStepInSeconds,
          new Cesium.JulianDate()
        );
        // 计算当前的3D坐标
        const position = Cesium.Cartesian3.fromDegrees(
          dataPoint.longitude,
          dataPoint.latitude,
          dataPoint.height
        );

        // 添加轨迹采样点
        positionProperty.addSample(time, position);

        // 添加物体点
        // cesiumMap.entities.add({
        //   position: position,
        //   point: {
        //     pixelSize: 10,
        //     color: new Cesium.Color(0.7, 0.8, 0, 0.7),
        //   },
        // });
      }

      // 创建绿色的大点作为飞机
      let airplaneEntity = cesiumMap.entities.add({
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: start,
            stop: stop,
          }),
        ]),
        model: {
          uri: '/static/Cesium_Air.glb',
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
        position: positionProperty,
        // 自动计算前进方向
        orientation: new Cesium.VelocityOrientationProperty(positionProperty),
        // 绘制轨迹线
        path: new Cesium.PathGraphics({
          width: 1,
        }),
        point: {
          pixelSize: 10,
          color: new Cesium.Color(0.5, 0.5, 0.5, 0.7),
        },
      });
      console.log(99,airplaneEntity)

      // 设置相机追踪运动物体
      // cesiumMap.trackedEntity = airplaneEntity;

      // 设置时间速率
      // cesiumMap.clock.multiplier = 10;

      // 设置自动播放
      // viewer.clock.shouldAnimate = true;
      // setTimeout(() => {
      //   cesiumMap.clock.shouldAnimate = true;
      // }, 5000);
    }
  }
}
</script>

<style scoped lang="scss">
  .cesium {
    height: 100%;
    width: 100%;

    ::v-deep.cesium-widget-credits {
      display: none !important;
      visibility: hidden !important;
    }
  }
</style>